<template>
  <!-- <router-link to="LifePay"> -->
  <div class="element">
    <router-link :to="data.path">
      <svg class="icon"
           aria-hidden="true">
        <use :xlink:href="data.icon"></use>
      </svg>
      <!-- <font-awesome-icon :icon="data.icon" /><br> -->
      <span class="functionSpan">{{data.text}}</span>
    </router-link>
  </div>

</template>
<script>
import FunctionDetail from '@/components/Property/FunctionDetail'
export default {
  name: 'iconElement',
  props: {
    data: {
      type: Object,
      default () {
        return {
        }
      }
    },
    methods: {

    },
    components: {
      FunctionDetail
    }

  }
}
</script>
<style scoped>
.element {
  text-align: center;
  margin-top: 3%;
  margin-bottom: 3%;
}
.functionSpan {
  color: #778899;
}
@media (min-width: 270px) and (max-width: 575.98px) {
  .element {
    font-size: 14px;
  }
  .icon {
    font-size: 220%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .element {
    font-size: 24px;
  }
  .icon {
    font-size: 300%;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  .element {
    font-size: 26px;
  }
  .icon {
    font-size: 350%;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .element {
    font-size: 28px !important;
  }
  .icon {
    font-size: 350%;
  }
}
@media (min-width: 1200px) {
  .element {
    font-size: 30px !important;
  }
  .icon {
    font-size: 400%;
  }
}

.icon {
  width: 100%;
}
</style>
